.clip-switch {
  z-index: 100;
  position: fixed;
  top: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  color: @text-color;
  background-color: @nav-bg-color;
  transition: all 0.15s;
  .active {
    color: @primary-color;
    background-color: @bg-color;
    transition: all 0.15s ease-in-out;
    svg {
      fill: @primary-color;
    }
  }
  .clip-switch-items {
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: row;
    margin-left: 5px;
    .clip-switch-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 58px;
      padding: 10px 15px 10px 15px;
      margin: 10px 0px 10px 5px;
      cursor: pointer;
      border-radius: 5px;
      font-size: 14px;
      transition: all 0.15s;
      &:hover {
        background-color: @nav-hover-bg-color;
        transition: all 0.15s ease-in-out;
      }
      svg {
        margin-right: 5px;
        max-width: 30%;
        fill: @text-color-lighter;
      }
    }
  }
  .clip-switch-btn-list {
    margin-right: 5px;
    .clip-switch-btn {
      width: 25px;
      height: 25px;
      padding: 10px;
      border-radius: 5px;
      margin: 5px 2px;
      cursor: pointer;
      color: @text-color;
      background-color: @nav-bg-color;
      &:hover {
        background-color: @nav-hover-bg-color;
        transition: all 0.15s ease-in-out;
      }
      &.clip-select-count {
        background-color: @primary-color;
        color: @bg-color;
      }
    }
  }
}
